<template>
  <div class="home">
    <div class="home-search">
      <div @click.stop="showDrop" class="prepend">
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <div  class="input">
        <input
          :clearable="true"
          placeholder="请输入标题或者内容"
          v-model="keyWord"
          v-on:keyup.enter="search"
          class="input-with-select"/>
        <span v-if="this.keyWord!=='' ? true:false" class="clear" >
          <i class="el-icon-error"  @click="clear"></i></span>
      </div>
      <div class="cancel" >
        <span class="icon"   @click="search"><i class="el-icon-search"></i></span>
        <span  @click="cancle"  class="text">取消</span>
      </div>
    </div>
    <!--下拉框-->
    <div v-show="dropdownList" class="dropdown">
      <span v-for="type in types">
        <span class="text" @click="searchType(type.value)" >{{type.value}}</span>
      </span>
    </div>
    <div class="home-container" ref="home">
      <div class="data-list" v-if="articles.length">
        <div slot="item" class="flow" v-for="(article,index) in articles" v-loading="loading">
          <!--时间轴-->
          <router-link :to="{ name:'ArticleShow', params: { id: article.id }}" tag="div">
            <div class="flow-item">
              <div class="time-line">
                <div class="cycle" ></div>
                <div class="line"  v-bind:class="articles.length === index+1 ? 'last-line':''"></div>
              </div>
              <div class="flow-right">
                <div class="flow-time">{{article.get('createdAt')|formatTime}}</div>
                <div class="flow-men">
                  <div class="men-info">
                    <router-link :to="{name: 'User', params: { id: article.get('author').id}}">
                      <span class="men-img" v-if="article.get('author').get('avatar')">
                       <span v-for="data in article.get('author').get('avatar')" >
                           <img v-lazy="data"  width="60" height="60" alt=""/>
                       </span>
                     </span>
                      <span class="men-img" v-else>
                 <i class="fa fa-user-circle-o  fa-3x" aria-hidden="true"></i>
                  </span>
                      <span class="men-name" >{{ article.get('author').get('username') }}</span>
                      <!--邮箱-->
                      <span class="men-time">
                      <span>
                       <i class="fa fa-envelope fa-lg" aria-hidden="true" ></i>
                      </span>
                      <span>{{article.get('author').get('email') }}</span>
                    </span>
                      <!--邮箱-->
                    </router-link>
                    <span class="men-icon" v-if="!index">New</span>
                  </div>
                  <!--内容-->
                  <div class="men-content">
                    <div class="flow-text" >
                      <!-- <div  v-html="article.get('content')"></div>-->
                      <!--文本组件-->
                      <qsj-editor  :showCounter="false"
                                   :isFocus="false"
                                   :readonly="true"
                                   :minHeight="0.01"
                                   :value="article.get('content')"
                                   :placeholder="placeholder"
                                   :deviceVersions="deviceVersions"
                                   class="flow-editor"
                      >

                      </qsj-editor>
                      <div class="icon" >
                        <span class="icon-classify">{{article.get('category_name')}}</span>
                        <span class="icon-comment">
                         <img src="../../assets/img/ico/praise-icon.svg" width="15px" height="15px"/>
                         {{article.get('like_num')}}
                      </span>
                        <span class="icon-comment">
                        <i class="fa fa-thumbs-o-down" aria-hidden="true" style="height: 15px" width="15px"></i>
                         {{article.get('dislike_num')}}
                      </span>
                        <span class="icon-help">
                         <img src="../../assets/img/flower.png" width="20px" height="20px"/>
                         {{article.get('flower_num')}}
                      </span>
                        <span class="icon-help">
                       <i class="fa fa-car" aria-hidden="true"></i>
                         {{article.get('car_num')}}
                      </span>
                        <span class="icon-help">
                       <i class="fa fa-plane" aria-hidden="true"></i>
                         {{article.get('fly_num')}}
                      </span>
                      </div>
                    </div>
                    <span class="flow-img" v-if="article.get('article_img')">
                       <img v-lazy="article.get('article_img')[0]"   width="64" height="64" class="img"/>
                  </span>
                    <span class="flow-img" v-else>
                    <i class="fa fa-file-image-o fa-4x" aria-hidden="true" ></i>
                  </span>
                  </div>
                  <div  class="border-line-bottom"></div>
                </div>
                <div class="flow-process">
                  <!--组件-->
                  <div class="process" >
                    文章主题： {{article.get('title')}}
                  </div>

                </div>

              </div>
            </div>
          </router-link>
          <!--时间轴结束-->
        </div>
      </div>
      <div  class="data-list" v-else><i class="el-icon-loading"></i></div>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex';
import Func from '../../assets/js/common.js'
import qsjEditor from '@/components/qsjEditor';
import  BScroll from 'better-scroll'

export default {

  name: 'List',

  data () {
    return {
      title: '',
      articles: [],
      placeholder:'',
      deviceVersions:'pc',
      dropdownList:false,
      keyWord:'',
      loading:false,
      types: [{
        value: '心灵鸡汤',
      }, {
        value: '言情',
      },{
        value: '科技',
      }, {
        value: '小说',
      }, {
        value: '古文',
      }, {
        value: '青春',
      }, {
        value: '生活',
      }, {
        value: '其它',
      }],
    };
  },
  created(){
      this.match();
  },
  watch: {
    ['$route.query']() {
      console.log('re render');
      this.articles = [];
      this.match();
    }
  },
  computed: mapState(['user']),
  methods: {
    showDrop() {
      this.dropdownList = !this.dropdownList;
    },
    match(){
      let flag = this.$route.query.type || this.$route.query.cid ;
      this.$Progress.start();
      switch(flag){
        case 'me':
          this.getMyArticles();
          break;
        case 'all':
          this.getAllArticles();
          break;
        default:
          this.getCategoryArticle(flag);
      }
    },
    query(){
      let q = new this.$api.SDK.Query('Article');
     /* q.include('category');*/
      q.include('author');
     // 新创建的在前面
      q.descending('createdAt');
      return q;
    },
    search(){
      const q = this.query();
      const p = this.query();
      q.contains('title',this.keyWord);
      p.contains('content',this.keyWord);
      this.setArticles(q);
      this.setArticles(p);
      console.log("搜索数据");
      console.log(this.keyWord)
    },
    cancle() {
      this.keyWord = '';
      this.getAllArticles();
    },
    clear(){
      this.keyWord = '';
    },
    searchType(value){
      console.log("**********************")
      console.log(value)
      const q = this.query();
      q.contains('category_name',value);
      this.setArticles(q);
    },
    searchKe(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    searchXiao(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    searchGu(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    searchSheng(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    searchQin(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    searchQi(){
      const q = this.query();
      q.contains('category_name','言情');
      this.setArticles(q);
    },
    getCategoryObj(id){
      return this.$api.SDK.Object.createWithoutData('Category', id);
    },
    setArticles(q){
      this.loading = true;
      this.dropdownList = false;
      setTimeout(() => {
        q.find().then((articles) => {
          this.articles = articles;
          this.$Progress.finish();
          this.loading = false;
        }).catch(this.fail);
      }, 800);

    },
    fail(error){
      this.$message.error(error);
      this.$Progress.fail();
    },
    getAllArticles(){
      this.title = "所有文章";
      const q = this.query();
      this.setArticles(q);
    },
    getMyArticles(){
      this.title = "我的文章";
      const q = this.query();
      q.equalTo('author', this.user);
      this.setArticles(q);
    },
    // cid => category_id
    getCategoryArticle(cid){
      let cateObj = this.getCategoryObj(cid);
      const q = this.query();
      q.equalTo('category', cateObj);
      this.setArticles(q);
    }
  },
  filters: {
    formatTime: Func.formatTime,
    isLike(arr, userInfo) {
      if (arr && userInfo) {
        if(arr.length <= 0) {
          return 'icon-xihuan'
        }
        return arr.map(function(item) {
          if (item === userInfo.objectId) {
            return 'icon-xihuan1'
          } else {
            return 'icon-xihuan'
          }
        });
      } else {
        return 'icon-xihuan'
      }
    }
  },
  components:{
    qsjEditor
  }
};
</script>

<style scoped lang="less">
  .home{
    .home-search{
      position: relative;
      background-color: #ffffff;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding:20px;
      padding-top:5px;
      padding-bottom:5px;
      font-family: 'Montserrat-Regular', 'STYuanti-SC-Regular', 'hyppt'!important;
      .prepend{
        cursor: pointer;
        border-radius: 6px;
        text-align: center;
        line-height: 8px;
        width: 50px;
      }
      .input{
        .input-with-select{
          width:400px;
          border-radius: 30%;
          height: 40px;
          border:none!important;
        }
        .el-icon-error{
          color: #cccccc;
        }
      }
      .cancel{
        color: #2467C2;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        text-align: center;
          .icon{
            cursor: pointer;
            padding-right: 20px;
          display: inline-block;
          margin-left: 20px;
          margin-right: 20px;
          border-right: 1px solid #cecece;
        }
        .text{
          cursor: pointer;
          padding: .1rem;
          width: 1rem;
        }
      }
    }
    .home-container{
      margin-top: 20px;
      width: 100%;
      height: 1000px;
      overflow: scroll;
      overflow-x: hidden;
      .flow{
        padding:5px;
        padding-bottom: 0;
        padding-top: 3px;
        .flow-item{
          position: relative;
          width: 100%;
          display: flex;
          justify-content:flex-start ;
          align-items: flex-start;
          /*  background: #0e89c6;*/
          .time-line{
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            .cycle{
              border: 8px solid #ffffff;
              border-radius: 100%;
              box-shadow: 0 0 0 1.25px #9d9c9c ;
              -moz-outline-radius: 100%;
              /*   transform: translateY(.3rem);*/
              z-index: 10;
            }
            .line{
              height: 100%;
              border-left: solid 1px #adadad;
              flex-shrink: 0;
              /*  margin-top:calc(100% - .24rem);*/
              margin-left: -1px;


            }

          }
          .flow-right{
            width:90%;
            margin-left: 50px;
            padding-bottom: 30px;
            cursor: pointer;
            .flow-time{
              display: flex;
              margin-top: -8px;
              flex-wrap: nowrap;
              font-family: PingFangSC-Regular;
              font-size: 18px;
              color: #999999;
              letter-spacing: 0;
              line-height: 34px;
            }
            .flow-men{
              margin-top:12px ;
              margin-left: 2px;
              background: #FFFFFF;
              border: 1px solid #c4c6ca;
              border-radius: 6px 6px 0 0;
              /*         background: #5bc0de;*/
              padding:12px;
              padding-top:12px ;
              padding-bottom: 12px;
              .men-info{
                width: 100%;
                display: flex;
                position: relative;
                flex-wrap: nowrap;
                align-items: center;
                flex-direction: row;
                height: 60px;
                .men-img {
                  display: inline-block;
                  width: 60px;
                  height: 60px;
                  .img{
                    border-radius: 12px;
                  }
                }
                .men-name {
                  margin-left: 16px;
                  font-family: PingFangSC-Regular;
                  font-size: 28px;
                  color: black;
                  letter-spacing: 0;
                }
                .men-time {
                  flex-direction: row;
                  margin-left:20px;
                  font-family: PingFangSC-Regular;
                  font-size: 10px;
                  color: #333333;
                  letter-spacing: 0;
                }
                .men-icon {
                  position: absolute;
                  left: 85%;
                  display: inline-block;
                  height: 28px;
                  width: 60px;
                  text-align: center;
                  vertical-align: middle;
                  line-height: 28px;
                  background: #F54A4B;
                  border-radius: 20px;
                  font-family: PingFangSC-Regular;
                  font-size: .22px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                }
              }
              .men-content{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 16px;
                .flow-text{
                  width: 478px;
                  margin-right: 20px;
                  .flow-editor{
                    margin-left: 60px;
                    text-align: left;
                  }
                  .icon{
                    display: inline-block;
                    margin-top: 16px;
                    font-family: PingFangSC-Regular;
                    font-size: 20px;
                    color: #adadad;
                    letter-spacing: 0;
                    line-height: 34px;
                    .icon-classify{
                      display:inline-block;
                      height: 34px;
                      padding:0 4px;
                      text-align: center;
                      vertical-align: middle;
                      align-items: center;
                      line-height: 34px;
                      font-size: 15px;
                      border: 1px solid #d2f7db;
                      border-radius: 8px;
                      background-color: #d2f7db;
                      color: black;
                    }
                    .icon-comment{
                      margin-left: 17.9px;
                    }
                    .icon-help{
                      margin-left: 17.9px;
                    }
                  }
                }
                .flow-img{
                  margin-right: 24px;
                  display: inline-block;
                  border-radius: 12px;
                  .img{
                    border-radius: 12px;
                  }
                }
              }
              .border-line-bottom::after{
                margin-top: 18px;
                border-bottom: 1px solid #E7E6EC;
              }
              .flow-people{
                margin-top: 41px;
                font-family: PingFangSC-Regular;
                font-size: 26px;
                color: #999999;
                letter-spacing: 0;
              }
            }
            .flow-men:hover{
              background-color: #f1f7f8;
            }
            .flow-process{
              padding:5px;
              padding-top: 0px;
              padding-right: 0px;
              padding-bottom: 0px;
              .process{
                display: flex;
                padding-left: 24px;
                vertical-align: center;
                align-items: center;
                height: 30px;
                background: #f0ece5;
                border: 2px solid #EEEEEE;
                border-radius: 6px 6px 0 0;
                vertical-align: middle;
              }
            }

          }

        }

      }




    }
  }

  .last-line{
    border-left: solid 0 red!important;
  }
  .fa-lg{
    line-height: 10px!important;
  }
  .dropdown{
    position: absolute;
    z-index: 10000;
    border: 1px solid #A8CBFA;
    background-color:#2c3e50;
    color: #ffffff;
    padding: 8px;
    border-radius: 24px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    .text{
      display: block;
      border-bottom: 1px solid #cccccc;
      padding-bottom: 3px;
      margin-bottom: 3px;

    }
    .text:hover{
      background-color: #A8CBFA;
    }
  }
</style>
